<template>
  <div>
    <div class="detail-header">
      <van-nav-bar title="我的订单" left-text="返回" right-text="" left-arrow @click-left="onClickLeft" />
    </div>
    <div>
      <van-tabs v-model="active" animated>
        <van-tab v-for="item in Tag" :title="item.title">
          <div class="container">
          <itemVue v-for="ever in item.taskArr" :titlename="ever.title" :price="ever.price" :label="ever.select"/>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Myorder } from '@/axios/index.js'
import { mapState } from 'vuex';
import itemVue from '@/components/item.vue'
export default {
  components:{
    itemVue
  },
  data() {
    return {
      Tag: [
        {
          title: '全部',
          taskArr: []
        },
        {
          title: '已接取',
          taskArr: []
        },
        {
          title: '已完成',
          taskArr: []
        }],
      active: 1
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    onClickLeft() {
      this.$router.push('/home/mine')
    }
  },
  created() {
    Myorder({ applicants: this.user.userId })
      .then((res) => {
        console.log(res.data.newTask);
        let arr = res.data.newTask
        this.Tag[0].taskArr = res.data.newTask
        arr.forEach(item => {
          if (item.status === 1) {
            this.Tag[1].taskArr.push(item)
          } else {
            this.Tag[2].taskArr.push(item)
          }

        });

      })
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 10px 10px 10px 10px;
  background: rgb(243, 241, 222);
}
</style>